<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Convert between LaTeX, MathML, OMML, eqn, and typst math formats.">
  <meta name="robots" content="index,follow">
  <title>texmath demo</title>
  <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    var postConvert = function(body, onSuccess, onError) {
      var xhr = new XMLHttpRequest();
      xhr.open('POST', '/texmath/convert', true);
      xhr.setRequestHeader('Accept', 'application/json');
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.onreadystatechange = function () {
        var res = null;
        if (xhr.readyState === 4) {
          if (xhr.status === 204 || xhr.status === 205) {
            onSuccess();
          } else if (xhr.status >= 200 && xhr.status < 300) {
            try { res = JSON.parse(xhr.responseText); } catch (e) { onError(e); }
            if (res) onSuccess(res);
          } else {
            onError(xhr.responseText);
          }
        }
      };
      xhr.send(JSON.stringify(body));
    };
    var convert = function() {
          postConvert(
             { 'text' : $('#input').val(),
               'from': $('#from').val(),
               'to': $('#to').val(),
               'display': $('#display').val() == "true" },
              function(res) {
                     $('#result').text(res);
	             $('#result').removeClass('error');
                  },
              function(err) {
                    console.log(err);
                     $('#result').text(err);
		     $('#result').addClass('error');
              })
    };
    // Browsers do not always like self-closing tags
    function removeSelfClosingTags(s){
      return s.replace(/<([a-z][a-z0-9]*)([^<>]*?) *\/>/g, "<$1$2><\/$1>");
    };

    $(document).ready(function(){
      $('#convert').click(convert);
      $('#to').change(convert);
      $('#from').change(convert);
      $('#display').change(convert);
    });
  </script>
  <style type="text/css">
  body { font-family: sans-serif; text-color: #555; font-size: 12pt; margin: 1em; }
  h1 { font-size: 20pt; max-width: 13em; margin-right: 1em; }
  .main-container { display: flex; flex-wrap: wrap; }
  .container { display: flex; flex: 1; flex-wrap: wrap; min-width: 300px; margin: 6pt; }
  textarea { width: 100%; font-size: 11pt; padding: 6px; }
  pre { white-space: pre-wrap; color: blue; font-size: 11pt; font-family: monospace; }
  .error { color: red; }
  </style>
  <script type="text/javascript">
  </script>
</head>
<body>
  <h1>texmath demo</h1>
  <p><a href="https://github.com/jgm/texmath">texmath</a> is a Haskell
  library, command-line program, and web server that converts between
  TeX, MathML, OMML, eqn, and typst formats for mathematical formulas.</p>
  <div id="controls" class="container">
    <button id="convert">Convert</button>
    <label for="from">from</label>
    <select name="from" id="from">
      <option value="tex" selected>tex</option>
      <option value="mathml">mathml</option>
      <option value="omml">omml</option>
    </select>
    <label for="to">to</label>
    <select name="to" id="to">
      <option value="tex">tex</option>
      <option value="mathml" selected>mathml</option>
      <option value="omml">omml</option>
      <option value="eqn">eqn</option>
      <option value="typst">typst</option>
    </select>
    <select name="display" id="display">
      <option value="true" selected>display</option>
      <option value="false">inline</option>
    </select>
  </div>

  <div class="main-container">

    <div class="container">
      <textarea id="input">\int_0^1 x^x\,\mathrm{d}x = \sum_{n = 1}^\infty{(-1)^{n + 1}\,n^{-n}}</textarea>
    </div>

    <div class="container">
      <pre id="result">
      </pre>
    </div>

  </div>
</body>
</html>
